import React, {Component} from 'react';
import MyHeader from "../MyUIComponent/MyHeader";
import {axiosGetFunction, axiosPostFunction} from "../MyConfig/AppConfig";
import {Table} from "antd";

class AllUser extends Component {
    state = {
        all_user: [],
        user_id: -1,
    }

    componentDidMount() {
        let user_id = localStorage.getItem("userInfo:id")
        if (user_id){
            this.setState({
                user_id: parseInt(user_id, 10)
            }, ()=>{
                this.loadAllUser();
            })
        }
    }

    loadAllUser = (callBack) => {
        axiosGetFunction("/user/all", (received_data)=>{
            let { dataList } = received_data;
            this.setState({ all_user: dataList });
            if (callBack) callBack();
        })
    }

    // 点击按钮之后做的事情
    onClickAction = (action_str, img_work_id) => {
        console.log(action_str, img_work_id);
        let url = ""
        if (action_str === "delete"){
            url = "/user/delete"
        }
        if (url !== ""){
            axiosPostFunction(url, {
                img_work_id
            }, ()=>{
                this.loadAllUser();
            })
        }
    }

    render() {
        let { all_user } = this.state;
        return (
            <div>
                <MyHeader pathname="all_user"/>
                <div style={{ padding: "30px" }}>
                    <h2><strong>所有用户</strong></h2>
                    <Table
                        dataSource={ all_user.map((item)=>({ key: "user:" + String(item.user_id), ...item })) }
                        columns={[
                            {
                                title: "ID",
                                dataIndex: "user_id",
                                key: "user_id"
                            },
                            {
                                title: "用户名",
                                dataIndex: "username",
                                key: "username",
                            },
                            {
                                title: "角色",
                                dataIndex: "role",
                                key: "role",
                                render: (item)=>{
                                    return item === 0 ? "管理员": "普通用户"
                                }
                            },
                            {
                                title: "操作",
                                dataIndex: "operation",
                                key: "operation",
                                render: (item, record)=>{
                                    return <span>
                                    <a onClick={()=>{ this.onClickAction("delete", record.img_work_id) }}>删除</a>
                                </span>
                                }
                            }
                        ]}
                    />
                </div>
            </div>
        );
    }
}

export default AllUser;
